<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="ck">
    <input type="text" v-model="ming">
    <input type="text" v-model="wang">
    <input type="text" v-model="lin">
    <button @click="tian()">添加</button>
    <ul>
        <li v-color="index" v-for="(item,index) in arr":key="item.id">
            {{item.id}}
            {{item.name}}
            {{item.url}}
            {{item.sold}}
            <button @click="add(item.id)">删除</button>
        </li>
    </ul>
</div>
<script>
      Vue.directive('color', function (ele, yan) {
            console.log(ele, yan);
            if (yan.value % 2 == 0) {
                ele.style.background = 'red'
            } else {
                ele.style.background = 'blue'
            }
        })
        new Vue({
            el:'#ck',
            data:{
                ming:'',
                wang:'',
                lin:'',
                arr:[{
                id: 0,
                name: '哔哩哔哩',
                url: 'http://www.bilibili.com/',
                sold: '哔哩哔哩官网'
            },
            {
                id: 1,
                name: '今日头条',
                url: 'http://www.toutiao.com/',
                sold: '今日头条:热榜新闻'
            },
            {
                id: 2,
                name: '百度',
                url: 'http://www.baidu.com/',
                sold: '百度搜索'
            },
            {
                id: 3,
                name: '新浪微博',
                url: 'http://www.weibo.com/',
                sold: '微博之夜'
            },
            {
                id: 4,
                name: '腾讯网',
                url: 'http://www.qq.com/',
                sold: '腾讯网tengxun'
            },]
            },
            methods:{
               add(i){
                  var a=this.arr.find(item=>item.id==i)
                  this.arr.splice(a,1)
               },
               tian(){
                   this.arr.push({
                          id:this.arr.length,
                          name:this.ming,
                          url:this.wang,
                          sold:this.lin
                     }
                   )
               }
            }
        })
</script>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="pro">
    <input type="text" v-model.number="a">
    <select v-model="sel">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model.number="b">
    <div>{{num}}</div>
    <button v-model="fa()">按钮</button>
</div>

<script>
    new Vue({
        el: '#pro',
        data: {
           a:'',
           b:'',
           sel:'+',
           num:0,
        }
        ,
        methods:{
            fa(){
                  switch(this.sel){
                    case'+':
                    this.num=this.a+this.b
                    break
                          case'-':
                    this.num=this.a+this.b
                    break
                          case'*':
                    this.num=this.a+this.b
                    break
                          case'/':
                    this.num=this.a+this.b
                    break
                  } 
            }
         
        }
    })
</script>
